import {Observer} from './Observer'
import {Compiler} from './Compiler'

class Vue {

  constructor(option) {
    this.$el = option.el ?
      document.querySelector(option.el)
    :
      document.querySelector('#app')
    
    this.$data = option.data()

    this.$methods = option.methods ? option.methods : {}
    this._proxyData(this.$data)
    this._initMethods(this.$methods)
    this._proxyMethods(this.$methods)

    new Observer(this.$data)
    new Compiler(this)
  }


  _proxyData(data) {
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        get() {
          return data[key]
        },
        set(newValue) {
          if(newValue === data[key]) return
          data[key] = newValue
        }
      })
    })
  }
  _proxyMethods(methods) {
    Object.keys(methods).forEach(key => {
      Object.defineProperty(this, key, {
        get() {
          return methods[key]
        },
        set(newValue) {
          if(newValue === methods[key]) return;
          methods[key] = newValue
        }
      })
    })
  }
  _initMethods(methods) {
    Object.keys(methods).forEach(key => {
      methods[key] = methods[key].bind(this)
    })
  }
}

// console.log();
let vue = new Vue({
  data() {
    return {
      name: 1,
      qian: {
        name: '我是真的钱'
      }
    }
  },
  methods: {
    add() {
      this.name++
    },
    edd() {
      this.name--
    }
  }
})







